<template>
  <div class="app-container">
     <form-operate-filter @on-filter="submitFilterForm"></form-operate-filter>

    <el-table border :data="tableData.list" v-loading="loading" element-loading-text="加载中..."
              class="el-table-align-center">
      <el-table-column label="时间" prop="time" width="180">
        <template slot-scope="{row}">
          <div>{{row.createTime | toTime}}</div>
        </template>
      </el-table-column>
      
      <el-table-column prop="operationDesc" label="操作项目">
        <template slot-scope="{row}">
            <span class="text-nowrap">{{row.operationDesc}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="ip" label="操作IP地址"></el-table-column>

      <el-table-column label="操作端">
        <template slot-scope="{row}">
          {{  clientType[row.clientType] }}
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="tableData.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getMemberSelfOperatorLogs } from '@/services/api/member';
import { grid, form, pickerOption } from '@/build';
// 查找过滤条件组件
import FormOperateFilter from '@/views/member/detail/formOperateFilter';

export default {
  name: 'user-self-operate-logs',
  components: {
    FormOperateFilter,
  },
  mixins: [grid, form, pickerOption],
  data() {
    const monthTime = [moment().startOf('month').format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')];
    return {
      tableData: {},
      filters: {
        userId: this.$store.state.member.member_id,
        page: 1,
        size: 20,
        startTime: moment(monthTime[0]).startOf('month').valueOf(),
        endTime: moment(monthTime[1]).endOf('day').valueOf(),
      },
      operatorList: [],
      form: {
        time: undefined,
      },
      filterDateType: false,
      clientType: {
        0: 'PC端',
        1: 'H5端',
        2: '安卓端',
        3: 'IOS端',
        4: 'PAD端',
      }, 
    };
  },
  methods: {
    submitFilterForm(formInline) {
        const {time, clientType, ip, operationType} = formInline;
        let startTime = undefined, endTime = undefined;
        if (!_.isUndefined(time) && _.isArray(time)) {
          startTime = moment(time[0]).startOf('month').valueOf();
          endTime = moment(time[1]).endOf('day').valueOf();
          formInline = {...formInline, startTime, endTime}
        } else {
          this.filters.startTime = undefined;
          this.filters.endTime = undefined;
        }
        this.filters = {...this.filters, clientType, ip, operationType, startTime, endTime}
        this.gridSearch();
      },
  },
  mounted() {
    this.bindGet(getMemberSelfOperatorLogs, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
    });
    this.getAll();
  },
};
</script>

<style lang="scss" scoped>
</style>
